<script>
import GlobalFilterListener from './GlobalFilterListener.vue'
export default {
  name: 'multidimensional-comprehensive-analysis',
  mixins: [GlobalFilterListener],
  data () {
    return {
      data1: [],
      data2: [],
    }
  },
  computed: {
    chartOption () {
      return {
        radar: {
          indicator: [
            { name: '综合能源消费量', color: '#02feff' },
            { name: '工业总产值', color: '#02feff' },
            { name: '产值单耗', color: '#02feff' },
            { name: '电耗量', color: '#02feff' },
            { name: '天然气耗量', color: '#02feff' },
          ],
          axisLabel: {
            color: '#02feff'
          },
          splitLine: {
            lineStyle: {
              color: '#136cca',
              opacity: 0.2
            }
          },
          splitArea: {
            areaStyle: {
              color: '#136cca',
              opacity: 0
            }
          },
          axisLine: {
            lineStyle: {
              color: '#136cca',
              opacity: 0.2
            }
          }
        },
        series: [
          {
            type: 'radar',
            lineStyle: {
              width: 1,
            },
            symbolSize: 3,
            itemStyle: {
              color: '#fff',
              shadowBlur: 10,
            },
            data: [
              {
                value: this.data1,
                name: '本期',
                itemStyle: {
                  shadowColor: '#2487dc',
                },
                lineStyle: {
                  color: '#2487dc'
                },
                areaStyle: {
                  color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                      offset: 0, color: 'rgba(36,135,220,0.1)'
                    }, {
                      offset: 1, color: 'rgba(36,135,220,0.5)'
                    }],
                  },
                }
              },
              {
                value: this.data2,
                name: '同比',
                itemStyle: {
                  shadowColor: '#34cac1',
                },
                lineStyle: {
                  color: '#34cac1'
                },
                areaStyle: {
                  color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                      offset: 0.2, color: 'rgba(52,202,193,0.1)'
                    }, {
                      offset: 1, color: 'rgba(52,202,193,0.5)'
                    }],
                  },
                }
              },
            ]
          }
        ]
      }
    }
  },
  mounted () {
    this.rand()
  },
  methods: {
    eventBusHandler () {
      this.rand()
    },
    rand () {
      this.data1 = Array(5).fill(1).map(() => (Math.random() * 2000 + 2000).toFixed(2))
      this.data2 = Array(5).fill(1).map(() => (Math.random() * 2000 + 2000).toFixed(2))
    }
  }
}
</script>

<template>
  <div class="block-item">
    <div class="flex align-center item-head">
      <svg-icon class="item-icon" name="set"></svg-icon>
      <div class="head-title">
        <h3 class="primary-title">能源消费结构分析</h3>
        <p class="secondary-title">Analysis of energy consumption structure</p>
      </div>
    </div>
    <div class="item-body">
      <div class="item-content" ref="container">
        <v-chart ref="chart" :option="chartOption" style="width: 100%;height: 240px;"></v-chart>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
